<template>
	<div class="detail_content" v-loading.fullscreen.lock="boxloading">
		<!-- 返回 -->
		<HyPageHeader style="margin-bottom: 10px" :title="deta.title">
			<!-- 详情区 -->
			<div class="detail_box">
				<div class="detail">
					<!-- 评审进度 -->
					<Schedule v-if="deta.processInstanceId" :processInstanceId="deta.processInstanceId" />
					<!-- 详情区 -->
					<detailCom :detailInfo="detailInfo" />
					<!-- 留痕轨迹 -->
					<History v-if="deta.processInstanceId" :processInstanceId="deta.processInstanceId" />
				</div>

				<!-- 数字化应用申报 -->
				<div class="fill_app_box" v-if="deta.pageTap == 'numDec' && showBox">
					<!-- 待审报  不通过 -->
					<div class="item_box" v-if="deta.status == '1' || deta.status == '3'">
						<el-button plain class="wihte-button" @click="edits">编辑</el-button>
						<el-button plain class="blue-button" @click="inner">申报</el-button>
						<el-button plain class="red-button" @click="delDeta">删除</el-button>
					</div>
					<!-- 申报中 -->
					<div class="item_box" v-if="deta.status == '2'">
						<el-button plain class="red-button" v-if="deta.canCancel" @click="quash">撤销</el-button>
						<el-button plain class="blue-button" @click="amendment">申请修改</el-button>
					</div>
					<!-- 修改中 -->
					<div class="item_box" v-if="deta.status == '6'">
						<el-button plain class="blue-button" @click="upDate">修改</el-button>
					</div>
				</div>
				<!-- 数字化应用申报审核 -->
				<div class="fill_app_box" v-if="deta.pageTap == 'numDecs' && showBox">
					<!-- 待审报 -->
					<!--v-if="deta.status == '1'"-->
					<div class="item_box" v-if="deta.status == '1'">
						<el-button v-if="whiachStatus" plain class="blue-button" @click="openBox">审核</el-button>
					</div>
					<!-- 通过 -->
					<div class="item_box" v-if="deta.status == '2'">
						<el-button plain class="red-button" @click="withdraw">撤回</el-button>
					</div>
				</div>
			</div>
		</HyPageHeader>
		<!-- 申请修改 -->
		<EditList @sendValue="getFileEditValue" :businessType="'2'" :businessKey="detaId" ref="editListRef" />

		<!-- 申报 submitPass 为审核成功后的回调函数 -->
		<Start ref="startRef" @submitPass="submitPass"></Start>
		<!-- 审核弹框 -->
		<ExamineBox ref="examineBoxRef" @submitPass="submitPass"></ExamineBox>
	</div>
</template>

<script lang="ts" setup>
import Schedule from '@cqdcg/admin/views/flow/task/Schedule/index';
import History from '@cqdcg/admin/views/flow/task/History/index';
import Start from '@cqdcg/admin/views/flow/form/tools/startFlow'; //申报组件
import ExamineBox from '@cqdcg/admin/views/flow/task/examineBox'; //审核组件
import { cancel } from '@cqdcg/admin/views/flow/task/cancel'; //撤销
import { revocation } from '@cqdcg/admin/views/flow/task/revocation'; //审批人撤回
import HyPageHeader from '/@/components/HyPageHeader/index.vue';
import { getByIdAppDeclare, submit, declareCancel, declareDelete } from '/@/api/decManagement/detail';
import { processRecordBack, processRecordExecute, recordsDetailApi } from '/@/api/digitalList/applicationRevew';
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import EditList from '/@/views/threeList/components/EditList/index.vue';

import mittBus from '/@/utils/mitt';
//信息
import detailCom from '/@/views/digitalList/detail/detailCom.vue';
const route = useRoute();
const router = useRouter();
const processInstanceId = ref(); //processInstanceId

const handleBack = () => {
	window.history.length > 1 ? router.go(-1) : router.push('/');
};
//审核通过
const submitPass = () => {
	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
	window.history.length > 1 ? router.go(-1) : router.push('/');
};
//审核弹窗列表
const sech: any = ref({
	processInstanceId: '',
	taskId: null,
	nodeId: '',
	appCode: '',
	pass: null,
	advice: '',
	files: [],
	end: '',
});
onMounted(() => {
	let data = route.query;
	//判断是那个页面跳过来的
	deta.value.pageTap = data.pageTap;
	deta.value.title = data.title;
	deta.value.status = data.status;
	deta.value.id = data.id;
	deta.value.appCode = data.appCode;
	deta.value.instanceId = data.instanceId;
	deta.value.processInstanceId = data.processInstanceId;

	let canCancel = data.canCancel;
	if (canCancel == 'false') {
		//不能撤销时给按钮禁用
		deta.value.canCancel = false;
	}

	sech.value.processInstanceId = data.processInstanceId;
	sech.value.appCode = data.appCode;
	sech.value.taskId = data.taskId;
	sech.value.nodeId = data.nodeId;
	//审核的额外参数值
	flowData.value.nodeId = data.nodeId;
	flowData.value.taskId = data.taskId;
	flowData.value.processInstanceId = data.processInstanceId;
	flowData.value.appCode = data.id;

	isStatus.value = data.isStatus;
	//判断是否是历史详情
	if (data.history) {
		getHistroyDetail();
	} else {
		//获取详情
		getDetail();
	}

	//判断有无按钮框
	if (data.pageTap == 'numDecs') {
		if (deta.value.status == 1 || deta.value.status == 2) {
			showBox.value = true;
		} else {
			showBox.value = false;
		}
	} else {
		if (deta.value.status == 5 || deta.value.status == 4) {
			showBox.value = false;
		}
	}
});
//使用计算属性控制显隐
//判断是否有按钮框
const showBox = ref(true);
const chooseTitle = computed(() => {
	return deta.value.title == '数字化应用申报审核' ? true : false;
});
//根据processInstanceId调用接口判断当前节点是否可撤回
const instanceIdBack = ref(true); //默认撤回按钮不显示
const isStatus: any = ref(0); //控制审核按钮，只有待审核:1才能显示
const processInstanceIdOk = () => {
	let data = {
		instanceId: sech.value.processInstanceId,
		taskId: sech.value.taskId,
		nodeId: sech.value.nodeId,
	};
	processRecordBack(sech.value.processInstanceId, sech.value.taskId, sech.value.nodeId).then((res) => {
		if (res.data == true) {
			instanceIdBack.value = true;
		}
	});
};
const whiachStatus = computed(() => {
	return isStatus.value == 1 ? true : false;
});
//获取详情
const boxloading = ref(false);
const getDetail = () => {
	boxloading.value = true;
	let declareId = deta.value.id;
	getByIdAppDeclare(declareId)
		.then((res) => {
			boxloading.value = false;
			if (res.code == 0) {
				detailInfo.info = res.data;
				if (deta.value.pageTap == 'numDec') {
					deta.value.status = res.data.base.status;
				}

				//判断有没有撤回按钮
				if (deta.value.pageTap == 'numDecs' && deta.value.status == 2 && res.data.canBack == false) {
					showBox.value = false;
				}
			}
		})
		.catch((res) => {
			boxloading.value = false;
		});
};
//获取历史记录详情
const getHistroyDetail = () => {
	boxloading.value = true;
	let historyVersionId = deta.value.id;
	let data = {
		historyVersionId,
		businessType: '2',
	};

	recordsDetailApi(data)
		.then((res) => {
			boxloading.value = false;
			if (res.code == 0) {
				detailInfo.info = res.data;
			}
		})
		.catch((res) => {
			boxloading.value = false;
		});
};

let deta: any = ref({
	//页面状态,
	pageTap: '',
	id: '',
	appCode: '',
	instanceId: '',
	//修改申请
	businessId: '',
	// 标题
	title: '数字化应用申报',
	//状态
	status: '',
	canCancel: true, //是否可以撤销
	//流程id
	processInstanceId: '',
	//修改申请弹窗
	reviseVisible: false,
	//审核弹窗
	centerDialogVisible: false,
});
//数据
let detailInfo = reactive({
	//状态
	status: '',
	//详情信息
	info: {
		base: {
			appCode: '',
		},
		net: {},
		irs: {},
		dev: {},
		budget: {},
		calculate: {},
	},
});

//数字化应用申报
//待审报=========
//编辑
const edits = () => {
	let id = deta.value.id;
	router.push({
		path: '/digitalList/addDigitalLization/index',
		query: {
			declareId: id,
			editPage: 'editPage',
		},
	});
};
//申报
const startRef = ref(null);
const inner = () => {
	let data = detailInfo.info;
	submit(data).then((res) => {
		if (res.code == 0) {
			let basicData = res.data;
			startRef?.value?.handle({
				flowName: basicData.flowName,
				businessKey: basicData.businessKey,
				paramMap: {},
			});
		}
	});
};
//删除
const delDeta = () => {
	// let appCode: any = detailInfo?.info?.base?.appCode;
	let id: any = deta.value.id;
	ElMessageBox.confirm('是否确认删除数据?', '操作确认', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			declareDelete(id).then((res) => {
				if (res.code == 0) {
					ElMessage({
						type: 'success',
						message: '删除成功',
					});
					submitPass();
				}
			});
		})
		.catch(() => {});
};
//撤销
const quash = () => {
	let instanceId: any = deta.value.instanceId;
	let data = {
		processInstanceId: instanceId,
	};
	cancel(data)
		.then((res: any) => {
			submitPass();
		})
		.catch((err: any) => {
			console.log('取消弹框和失败回调');
		});
};
//申请修改
const editListRef = ref();
const detaId = ref();
const amendment = () => {
	detaId.value = deta.value.id;
	editListRef.value.dialogVisible = true;
};
//资料修改发起
const getFileEditValue = (value: any) => {
	startRef?.value?.handle({
		flowName: value.flowName,
		businessKey: value.businessKey,
	});
};
//修改
const upDate = () => {
	let id = deta.value.id;
	router.push({
		path: '/digitalList/addDigitalLization/index',
		query: {
			declareId: id,
			editPage: 'editPage',
		},
	});
};
//撤回
const withdraw = () => {
	// ElMessageBox.confirm('是否确认撤回?', '操作确认', {
	// 	confirmButtonText: '确定',
	// 	cancelButtonText: '取消',
	// 	type: 'warning',
	// })
	// 	.then(() => {
	// 		processRecordExecute(sech.value.processInstanceId, sech.value.taskId, sech.value.nodeId).then((res) => {
	// 			console.log(res);
	// 			ElMessage({
	// 				type: 'success',
	// 				message: '操作成功',
	// 			});
	// 		});
	// 	})
	// 	.catch(() => {});
	let obj = {
		processInstanceId: sech.value.processInstanceId,
	};
	revocation(obj)
		.then((res: any) => {
			// console.log('撤回接口成功回调');
			submitPass();
		})
		.catch((err: any) => {
			// console.log('取消弹框和失败回调');
		});
};

//审批相关数据
const approve = () => {};
const examineBoxRef: any = ref(null);
const flowData = ref<any>({
	nodeId: '',
	taskId: '',
	processInstanceId: '',
	appCode: '',
});
const openBox = () => {
	// examineBoxRef.value.dialogVisible = true;
	examineBoxRef.value.handle({
		nodeId: flowData.value.nodeId,
		taskId: flowData.value.taskId,
		processInstanceId: flowData.value.processInstanceId,
		paramMap: {},
	});
};
// 撤回
const sendBackRef: any = ref(null);
const handleApprove = () => {
	sendBackRef.value.handle({
		nodeId: flowData.value.nodeId,
		taskId: flowData.value.taskId,
		processInstanceId: flowData.value.processInstanceId,
		paramMap: {},
	});
};
</script>

<style lang="scss" scoped>
.detail_content {
	width: 100%;
	padding: 15px;
	padding-bottom: 0px;

	:deep(.h-full) {
		height: auto;
	}

	.goback {
		width: 100%;
	}

	.detail_box {
		position: relative;
		overflow: auto;
		width: 100%;
		height: calc(100vh - 185px);
		display: flex;
		flex-direction: column;

		.detail {
			.review_progress {
				// 评审进度
				margin-top: 20px;
			}
			// height: calc(100% - 25px);
			overflow-y: auto;
			// flex-grow: 1;
		}

		.fill_app_box {
			margin-top: 10px;
			width: 100%;
			padding: 10px 0;
			text-align: center;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
			flex-grow: 0;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;

			.item_box {
				display: flex;
			}
		}
	}
	.dialogs {
		:deep(.el-dialog__header) {
			padding: 0px !important;
		}
		:deep(.el-dialog__body) {
			padding: 10px 0px !important;
		}
		.dialogs_box {
			width: 90%;
			padding: 5px;
			.diaCont {
				.diaCont_box1 {
					display: flex;
					flex-wrap: wrap;
					border-top: 1px solid black;
					.flxe_item {
						margin-right: 50px;
						margin-top: 10px;
						margin-bottom: 10px;
						display: flex;
					}
				}
				.diaCont_box2 {
					display: flex;
					flex-wrap: wrap;
					border-top: 1px solid black;
					padding-top: 10px;

					.flxe_item {
						margin-right: 50px;
						margin-top: 10px;
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}

	.reviseVisible {
		.revise_body {
			.step_box {
				.title {
				}
			}
		}
	}
}

.audit {
	position: fixed;
	right: 20px;
	bottom: 100px;
	z-index: 999;
}
</style>
